<template>
  <div class="aside">
   
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#0C2135"
      text-color="white"
      mode="vertical"
      router
      default-active='/todayData'
      unique-opened=true
    >
      <div class="box">
         <div class="image">
        <img src="/src/assets/images/logo.png" alt="">
    </div>
      <div class="text">
        Gin Admin
      </div>
      </div>
      <template v-for="item1 in data.arr">
        <template v-if="item1.next">
          <el-sub-menu :index="item1.title" :key="item1.id">
            <template #title>
              <el-icon>
                <!-- 用component 来生成自定义标签 -->
                <component :is="item1.icon1"></component>
              </el-icon>
              <span>{{ item1.title }}</span>
            </template>
            <template v-for="item2 in item1.next">
              <template v-if="item2.next">
                <el-sub-menu :index="item2.index" :key="item2.id">
                  <template #title>
                    <el-icon>
                      <component :is="item2.icon2"></component>
                    </el-icon>
                    <span>{{ item2.title }}</span>
                  </template>

                  <div v-for="item3 in item2.next" :key="item3.id">
                    <el-menu-item :index="item3.index" :key="item3.id">
                      <el-icon>
                        <component :is="item3.icon3"></component>
                      </el-icon>
                      <template #title>{{ item3.title }}</template>
                    </el-menu-item>
                  </div>
                </el-sub-menu>
              </template>
              <template v-else>
                <el-menu-item :index="item2.index" :key="item2.id">
                  <el-icon>
                    <component :is="item2.icon2"></component>
                  </el-icon>
                  <template #title>{{ item2.title }}</template>
                </el-menu-item>
              </template>
            </template>
          </el-sub-menu>
        </template>

        <template v-else>
          <el-menu-item :index="item1.index" :key="item1.id">
            <el-icon>
              <component :is="item1.icon1"></component>
            </el-icon>
            <template #title>{{ item1.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup  lang='ts'>
import { ref, reactive, getCurrentInstance } from "vue";
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from "@element-plus/icons-vue";
const isCollapse = ref(true);
var { proxy } = getCurrentInstance();
const bus = proxy.$bus;
bus.on("change", () => {
  isCollapse.value = !isCollapse.value;
  console.log(isCollapse.value);
});
const data = reactive({
  arr: [
    {
      title: "大仪表盘",
      id: "01",
      icon1: "Apple",
      next: [{ title: "今日数据", id: "011", index: "/todayData", icon2: "Basketball" }],
    },
    {
      title: "管理系统",
      id: "02",
      icon1: "Apple",
      next: [
        {
          title: "部门管理",
          id: "021",
          index: "/department",
          icon2: "Basketball",
        },
        {
          title: "角色管理",
          id: "022",
          index: "/role",
          icon2: "Baseball",
        },
        {
          title: "账号管理",
          id: "023",
          index: "/account",
          icon2: "Baseball",
        },
        {
          title: "菜单管理",
          id: "024",
          index: "/menu",
          icon2: "Baseball",
        },
        {
          title: "日志管理",
          id: "025",
          index: "/riZhi",
          icon2: "Baseball",
        },
        {
          title: "修改密码",
          id: "026",
          index: "/password",
          icon2: "Baseball",
        },
      ],
    },
    {
      title: "文件处理",
      id: "03",
      icon1: "Aim",
      next: [
        { title: "文件上传", id: "031", index: "/upload", icon2: "Avatar" },
        {
          title: "文件编辑器",
          id: "032",
          index: "/edit",
          icon2: "Calendar",
        },
        {
          title: "MarkDown",
          id: "033",
          index: "/markDown",
          icon2: "Calendar",
        },
      ],
    },
    {
      title: "拖拽组件",
      id: "04",
      icon1: "Apple",
      next: [
        {
          title: "拖拽列表",
          id: "041",
          index: "/file-list",
          icon2: "Basketball",
        },
        {
          title: "拖拽弹框",
          id: "042",
          index: "/file-window",
          icon2: "Baseball",
        },
      ],
    },
    {
      title: "自定义图标",
      id: "05",
      icon1: "House",
      index: "/icon",
    },
  ],
});



</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.aside {
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  background-color: hsl(209, 100%, 8%);
}
a{
  color:blue;
}
.image{
width: 40px;
height: 40px;
margin: 0  15px;
display: inline-block; 
}
.image img {
    width: 100%;
    height: 100%;
  vertical-align: top;
}
.el-menu{
  border-right: 0;
}
.text{
   font-size: 16px;
  display: inline-block;
  color: white;
  font-weight: 600;
}
.box {
  overflow: hidden;
  padding-top: 16px;
  height: 50px;
  line-height: 45px;
}
</style>